<template>
  <div style="padding: 30px">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="mini"
      label-width="auto"
      label-position="left"
    >
      <!-- 搜索区域 -->
      <el-row type="flex" justify="start" :gutter="20">
  <el-col :span="4">
    <el-form-item>
      <span slot="label" class="form-label">合同编号</span>
      <el-input
        v-model="formData.contractCode"
        placeholder="请输入合同编号"
        clearable
      ></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item>
      <span slot="label" class="form-label">合同名称</span>
      <el-input
        v-model="formData.clientName"
        placeholder="请输入合同名称"
        clearable
      ></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item>
      <span slot="label" class="form-label">合同类型</span>
      <el-select
        v-model="formData.contractType"
        placeholder="请选择"
        clearable
        style="width: 100%"
      >
        <el-option label="在线运维" value="在线运维"></el-option>
        <el-option label="在线建设" value="在线建设"></el-option>
        <el-option label="污水运维" value="污水运维"></el-option>
        <el-option label="污水建设" value="污水建设"></el-option>
        <el-option label="宝马在线" value="宝马在线"></el-option>
        <el-option label="宝马污水" value="宝马污水"></el-option>
        <el-option label="其他" value="其他"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item>
      <span slot="label" class="form-label">客户经理</span>
      <el-input
        v-model="formData.manager"
        placeholder="请输入客户经理"
        clearable
        style="width: 100%"
      >
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item>
      <span slot="label" class="form-label">开始时间</span>
      <el-date-picker
        v-model="formData.startDate"
        type="date"
        placeholder="选择日期"
        style="width: 100%"
      >
      </el-date-picker>
    </el-form-item>
  </el-col>
  <el-col :span="4">
    <el-form-item>
      <span slot="label" class="form-label">到期时间</span>
      <el-date-picker
        v-model="formData.endDate"
        type="date"
        placeholder="选择日期"
        style="width: 100%"
      >
      </el-date-picker>
    </el-form-item>
  </el-col>

</el-row>

<el-row type="flex" justify="start" :gutter="20">
  <el-col :span="24" class="btn-group">
    <!-- 基础操作按钮 -->
    <div class="btn-section">
      <el-button type="primary" @click="handleSearch" size="mini" icon="el-icon-search">搜索</el-button>
      <el-button type="success" @click="handleAdd" size="mini" icon="el-icon-plus">新增</el-button>
      <el-button type="info" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      <el-button type="warning" icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>

      <el-button type="primary" @click="handleEditSelected" size="mini" icon="el-icon-edit" :disabled="selectedRows.length !== 1">编辑</el-button>
      <el-button type="success" @click="handleInvoiceApplySelected" size="mini" icon="el-icon-document" :disabled="selectedRows.length !== 1">申请开票</el-button>
      <el-button type="info" @click="viewInvoiceDetailSelected" size="mini" icon="el-icon-view" :disabled="selectedRows.length !== 1">查看开票明细</el-button>
      <el-button type="warning" @click="openReturnValueDialogSelected" size="mini" icon="el-icon-money" :disabled="selectedRows.length !== 1">增加回款</el-button>
    </div>
  </el-col>
</el-row>

    <div class="table-container">
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
         size="mini"
        :header-cell-style="{background:'#f5f7fa',color:'#606266',fontSize:'14px',fontWeight:'600',textAlign:'center'}"
        :cell-style="{fontSize:'12px',padding:'6px 0',textAlign:'center'}"
        height="700"
      >
        <!-- 固定在左侧的列 -->

        <el-table-column type="selection" width="55" fixed="left"></el-table-column>
        <el-table-column type="index" label="序号" width="60" fixed="left" :index="indexMethod"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" fixed="left">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="auditStatus" label="审核状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getAuditStatusType(scope.row.auditStatus)">
              {{ auditStatusMap[scope.row.auditStatus] }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="contractCode" label="合同编号" width="130" fixed="left"></el-table-column>
        <el-table-column prop="contractName" label="合同名称" width="120" fixed="left"></el-table-column>
        <!-- <el-table-column prop="clientName" label="客户名称" width="150" fixed="left"></el-table-column> -->
        <el-table-column prop="clientName" label="合同状态" width="150" fixed="left">
            <template slot-scope="scope">
               {{ getContractStatus(scope.row.endDate,scope.row.contractType) }}
            </template>
          </el-table-column>

        <!-- 可以横向滚动的列 -->
        <!-- <el-table-column prop="clientCode" label="客户编号" width="120"></el-table-column> -->
        <el-table-column prop="contractType" label="合同类型" width="120"></el-table-column>
        <el-table-column prop="contractAmount" label="合同金额" width="120">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.contractAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="effectiveAmount" label="有效金额" width="120">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.effectiveAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="yearAgreedPayment" label="本年约定回款" width="120">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.yearAgreedPayment) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentType" label="付款方式" width="100">
          <template slot-scope="scope">
            {{ paymentTypeMap[scope.row.paymentType] }}
          </template>
        </el-table-column>
        <el-table-column prop="manager" label="客户经理" width="100"></el-table-column>

        <el-table-column prop="signDate" label="签约时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.signDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.startDate) }}
          </template>
        </el-table-column>

        <el-table-column prop="endDate" label="到期时间" width="120">
          <template slot-scope="scope">
            {{ ['在线建设', '污水建设', '其他'].includes(scope.row.contractType) ? '--' : formatDate(scope.row.endDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="contractPeriod" label="合同周期" width="100">
          <template slot-scope="scope">
            {{ ['在线建设', '污水建设', '其他'].includes(scope.row.contractType) ? '--' : scope.row.contractPeriod }}
          </template>
        </el-table-column>

        <!-- <el-table-column prop="paidAmount" label="已付款总金额" width="120">
          <template slot-scope="scope">
            {{ formatMoney(scope.row.paidAmount) }}
          </template>
        </el-table-column>  -->
        <el-table-column prop="firstPaymentMonth" label="首次回款月份" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.firstPaymentMonth, 'YYYY-MM') }}
          </template>
        </el-table-column>
        <el-table-column prop="contractCategory" label="合同类别" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="showContractDetail(scope.row)" class="contract-category-btn">
              {{ scope.row.contractCategory }}
            </el-button>
          </template>
        </el-table-column>


      </el-table>
    </div>



      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="formData.pageNum"
        :limit.sync="formData.pageSize"
        @pagination="getList"
      />
    </el-form>

    <!-- 合同类型选择对话框 -->
<el-dialog title="选择合同类型" :visible.sync="contractTypeDialogVisible" width="850px" class="contract-type-dialog">
  <div class="contract-type-content">
    <div class="contract-type-title">
      <i class="el-icon-document"></i>
      <span>请选择您要创建的合同类型</span>
    </div>
    <el-form :model="contractTypeForm" ref="contractTypeForm" label-width="0px">
      <el-form-item prop="contractCategory">
        <el-radio-group v-model="contractTypeForm.contractCategory" class="contract-type-radio-group">
          <el-radio label="普通合同" class="contract-type-radio">
            <div class="radio-content">
              <i class="el-icon-document-copy"></i>
              <span class="radio-title">普通合同</span>
            </div>
          </el-radio>
          <el-radio label="捆绑合同" class="contract-type-radio">
            <div class="radio-content">
              <i class="el-icon-link"></i>
              <span class="radio-title">捆绑合同</span>
            </div>
          </el-radio>
          <el-radio label="补充合同" class="contract-type-radio">
            <div class="radio-content">
              <i class="el-icon-circle-plus"></i>
              <span class="radio-title">补充合同</span>
            </div>
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="contractTypeDialogVisible = false" size="medium">取 消</el-button>
    <el-button type="primary" @click="confirmContractType" size="medium" :disabled="!contractTypeForm.contractCategory">确 定</el-button>
  </div>
</el-dialog>

    <!-- 新增/编辑对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="85%" class="contract-dialog">
  <div class="dialog-content">
    <!-- 捆绑合同信息显示 -->
    <div v-if="dialogForm.contractCategory === '捆绑合同' && bundledContracts.length > 0" class="bundled-contracts-info">
      <div class="info-header">
        <i class="el-icon-collection"></i>
        <span>已填写的捆绑合同 ({{ bundledContracts.length }}个)</span>
        <el-button type="primary" size="mini" icon="el-icon-view" @click="showBundledContractsDetail" class="view-detail-btn">
          查看详情
        </el-button>
      </div>
      <div class="contracts-list">
        <el-tag v-for="(contract, index) in bundledContracts" :key="index" type="info" class="contract-tag">
          {{ contract.contractType }} - {{ contract.clientName }}
        </el-tag>
      </div>
    </div>

    <el-form :model="dialogForm" ref="dialogForm" :rules="dialogRules" label-width="130px" class="contract-form">
      <!-- 基本信息板块 -->
      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-document"></i>
          <span>基本信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="合同分类" prop="contractCategory">
              <el-input v-model="dialogForm.contractCategory" disabled size="medium" style="background-color: #f5f7fa;">
                <template slot="prefix">
                  <i class="el-icon-collection-tag" style="color: #409EFF;"></i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dialogForm.contractCategory !== '补充合同'">
            <el-form-item label="合同编号" prop="contractNumber" :disabled="isEdit">
              <el-select v-model="dialogForm.contractPrefix" placeholder="请选择前缀" size="medium">
                <el-option label="ST" value="ST"></el-option>
                <el-option label="OL" value="OL"></el-option>
                <el-option label="JY" value="JY"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-else>
            <el-form-item label="合同编号" prop="contractCode">
              <el-autocomplete
                v-model="dialogForm.contractCode"
                :fetch-suggestions="queryContractNumberAsync"
                placeholder="请输入合同编号进行搜索"
                size="medium">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同类型" prop="contractType">
              <el-select v-model="dialogForm.contractType" placeholder="请选择类型" @change="handleContractTypeChange" size="medium">
                <el-option label="在线运维" value="在线运维"></el-option>
                <el-option label="在线建设" value="在线建设"></el-option>
                <el-option label="污水运维" value="污水运维"></el-option>
                <el-option label="污水建设" value="污水建设"></el-option>
                <el-option label="污水宝马" value="污水宝马"></el-option>
                <el-option label="在线宝马" value="在线宝马"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="合同状态" prop="contractStatus">
              <el-select v-model="dialogForm.contractStatus" placeholder="请选择状态" size="medium">
                <el-option label="续签项目" value="续签项目"></el-option>
                <el-option label="流程性项目（A类含盲投、分公司领导给予的资源项目）" value="流程性项目（A类含盲投、分公司领导给予的资源项目）"></el-option>
                <el-option label="公司资源项目（老客户新业务）" value="公司资源项目（老客户新业务）"></el-option>
                <el-option label="个人承揽" value="个人承揽"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付款方式" prop="paymentType">
              <el-select v-model="dialogForm.paymentType" placeholder="请选择付款方式" size="medium">
                <el-option v-for="(value, key) in paymentTypeMap"
                  :key="key"
                  :label="value"
                  :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="dialogForm.contractName" placeholder="请选择客户名称后自动填充" disabled size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="dialogForm.remark" type="textarea" :rows="2" placeholder="请输入备注信息" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 金额信息板块 -->
      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-money"></i>
          <span>金额信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="合同金额" prop="contractAmount">
              <el-input v-model="contractAmountDisplay"
                @input="handleContractAmountInput"
                @blur="formatContractAmountDisplay"
                placeholder="请输入合同金额"
                size="medium">
                <template slot="suffix">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="有效金额" prop="effectiveAmount">
              <el-input v-model="effectiveAmountDisplay"
                @input="handleEffectiveAmountInput"
                @blur="formatEffectiveAmountDisplay"
                placeholder="请输入有效金额"
                size="medium">
                <template slot="suffix">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="利润率" prop="profitMargin">
              <el-input v-model.number="dialogForm.profitMargin" type="number" placeholder="请输入利润率" size="medium">
                <template slot="suffix">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 时间信息板块 -->
      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-date"></i>
          <span>时间信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="签约时间" prop="signDate">
              <el-date-picker v-model="dialogForm.signDate"
                type="date"
                placeholder="选择签约日期"
                value-format="yyyy-MM-dd"
                size="medium">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker v-model="dialogForm.startDate"
                type="date"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd"
                size="medium">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="!hideDateFields">
            <el-form-item label="到期时间" prop="endDate">
              <el-date-picker v-model="dialogForm.endDate"
                type="date"
                placeholder="选择到期日期"
                value-format="yyyy-MM-dd"
                size="medium">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" v-if="!hideDateFields">
          <el-col :span="8">
            <el-form-item label="首次回款月份" prop="firstPaymentMonth">
              <el-date-picker v-model="dialogForm.firstPaymentMonth"
                type="month"
                placeholder="选择回款月份"
                value-format="yyyy-MM"
                size="medium">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 文件上传板块 -->
      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-folder-opened"></i>
          <span>合同文件</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="文件上传" prop="contractFile">
              <el-upload
                class="upload-container"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-upload="beforeUpload"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :headers="headers"
                :limit="5"
                multiple
                drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">支持pdf/word/excel文件，单个文件不超过10MB，最多5个文件</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 商务信息板块 -->
      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-user"></i>
          <span>商务信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="客户经理">
              <el-input :value="user.userName" disabled size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属部门" prop="department">
              <el-select v-model="dialogForm.department" placeholder="请选择部门" size="medium">
                <el-option
                  v-for="item in departmentOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 客户信息板块 -->
      <div class="form-section">
        <div class="section-title">
          <i class="el-icon-office-building"></i>
          <span>客户信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="clientName">
              <el-autocomplete
                v-model="dialogForm.clientName"
                :fetch-suggestions="queryClientAsync"
                placeholder="请输入客户名称"
                @select="handleClientSelect"
                size="medium">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户编号" prop="clientCode">
              <el-input v-model="dialogForm.clientCode" disabled size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>

  <!-- 底部按钮 -->
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
    <el-button v-if="dialogForm.contractCategory === '捆绑合同'" type="primary" @click="continueCreate" size="medium">继续创建</el-button>
    <el-button v-if="dialogForm.contractCategory !== '捆绑合同'" type="primary" @click="submitDialog" size="medium">确 定</el-button>
  </div>
</el-dialog>
<el-dialog :visible.sync="isReturnValueDialogVisible" title="增加回款" width="90%" class="compact-dialog" :close-on-click-modal="false">
    <el-form :model="returnValueForm" ref="returnValueForm" label-width="100px">
    <!-- 发票状态 -->
    <el-form-item label="发票状态" prop="hasInvoice">
      <el-radio-group v-model="returnValueForm.hasInvoice">
        <el-radio label="1">已有发票</el-radio>
        <el-radio label="0">未有发票</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 发票选择 -->
    <el-form-item label="请选择发票" prop="invoiceId" v-if="returnValueForm.hasInvoice === '1'">
      <el-select
        v-model="returnValueForm.invoiceId"
        placeholder="请选择发票"
        @change="handleInvoiceChange"
      >
        <el-option
          v-for="invoice in invoiceList"
          :key="invoice.id"
          :label="invoice.contractNumberAmount"
          :value="invoice.id"
        ></el-option>
      </el-select>

    </el-form-item>

    <el-form-item label="可开票金额" v-if="returnValueForm.invoiceId && returnValueForm.hasInvoice === '1' ">
        <span>{{ availableAmount || '查询中...' }}</span>
      </el-form-item>
    <!-- 回款金额 -->
    <el-form-item label="回款金额" prop="payment">
      <el-input
        v-model="returnValueForm.payment"
        type="number"
        placeholder="请输入回款金额"
      ></el-input>
    </el-form-item>

      <!-- 滚动表格容器 -->
      <div class="scrollable-table-container" style="max-height: 400px;overflow-y: auto;">
        <table class="return-table" style="font-size:12px;line-height:1.5;width:100%;border-collapse:collapse;">
          <thead>
            <tr>
              <th style="padding:8px 12px;border:1px solid #e5e7eb;background-color:#f8f9fa;">计划月份</th>
              <th v-for="(month, index) in monthList" :key="'month-' + index" style="padding:8px 12px;min-width:80px;border:1px solid #e5e7eb;background-color:#f8f9fa;">{{ month }}</th>
            </tr>
          </thead>
          <tbody>
            <tr :style="{ 'background-color': index % 2 === 0 ? '#ffffff' : '#f9fafb' }" v-for="(row, index) in [1]" :key="'agreed-row-' + index">

              <td style="padding:8px 12px;border:1px solid #e5e7eb;">约定回款</td>
              <td v-for="(payment, index) in agreedPaymentList" :key="'agreed-' + index" style="padding:8px 12px;border:1px solid #e5e7eb;">{{ payment }}</td>
            </tr>
            <tr :style="{ 'background-color': index % 2 === 0 ? '#ffffff' : '#f9fafb' }" v-for="(row, index) in [1]" :key="'actual-row-' + index">
              <td style="padding:8px 12px;border:1px solid #e5e7eb;">实际回款</td>
              <td v-for="(payment, index) in actualPaymentList" :key="'actual-' + index" style="padding:8px 12px;border:1px solid #e5e7eb;">{{ payment }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-form>

    <!-- 合计信息 -->
    <div class="contract-summary">
      <!-- <span>回款总金额: <strong>{{ totalReturnAmount }}</strong></span>   -->
      <br />
      <span>合同金额: <strong>{{ contractAmount }}</strong></span>
    </div>

    <!-- 弹窗底部的按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="isReturnValueDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addReturnValue">确 定</el-button>
    </span>
  </el-dialog>
    <el-dialog title="开票明细" :visible.sync="invoiceDetailDialogVisible" width="70%">
      <div class="invoice-detail-container">
        <el-table :data="invoiceDetails" border style="width: 100%">
          <el-table-column prop="agent" label="经办人" width="120"></el-table-column>
          <el-table-column prop="department" label="经办部门" width="150"></el-table-column>
          <el-table-column prop="applicationDate" label="申请日期" width="140"></el-table-column>
          <el-table-column prop="startDate" label="服务开始日期" width="140"></el-table-column>
          <el-table-column prop="endDate" label="服务结束日期" width="140"></el-table-column>
          <el-table-column prop="paymentStatus" label="款项情况" width="140"></el-table-column>
          <el-table-column prop="contractNumber" label="合同编号" width="150"></el-table-column>
          <el-table-column prop="applyUnit" label="申请单位" width="150"></el-table-column>
          <el-table-column prop="purchaseUnit" label="购买单位名称" width="150"></el-table-column>
          <el-table-column prop="invoiceType" label="发票类型" width="120"></el-table-column>
          <el-table-column prop="taxNumber" label="税号" width="120"></el-table-column>
          <el-table-column prop="address" label="地址" width="150"></el-table-column>
          <el-table-column prop="phone" label="电话" width="150"></el-table-column>
          <el-table-column prop="bank" label="开户行" width="120"></el-table-column>
          <el-table-column prop="bankAccount" label="银行账号" width="150"></el-table-column>
          <el-table-column prop="invoiceContent" label="开票内容" width="150"></el-table-column>
          <el-table-column prop="invoiceAmount" label="开票金额(元)" width="120"></el-table-column>
          <el-table-column prop="remark" label="备注" width="150"></el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog title="申请开票" :visible.sync="invoiceDialogVisible" width="70%">
      <div class="invoice-container">
        <h2 class="company-title" style="text-align: center;">沈阳圣泰环保科技有限公司</h2>

        <el-form :label-width="formLabelWidth" class="invoice-form">

          <el-form-item label="经办人" required>
            <span class="form-value">{{ user.userName }}</span>
          </el-form-item>

          <el-form-item label="经办部门" required>
            <el-select v-model="invoiceFormData.department" placeholder="请选择或新增" style="width: 100%">
              <el-option label="圣泰质控部" value="圣泰质控部"></el-option>
              <el-option label="圣泰市场部" value="圣泰市场部"></el-option>
              <el-option label="圣泰污水运营部" value="圣泰污水运营部"></el-option>
              <el-option label="圣泰在线运营部" value="圣泰在线运营部"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="申请日期" required>
            <span style="line-height: 32px;">{{ formatDate(new Date()) }}</span>
          </el-form-item>

          <el-form-item label="款项情况" required>
            <el-select v-model="invoiceFormData.paymentStatus" placeholder="请选择" style="width: 100%">
              <el-option label="已回款" value="已回款"></el-option>
              <el-option label="未回款" value="未回款"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="合同编号" required>
            <el-input v-model="invoiceFormData.contractNumber" placeholder="请输入"></el-input>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请单位" required>
                <el-select v-model="invoiceFormData.applyUnit" placeholder="请选择" style="width: 100%">
                  <el-option label="沈阳圣泰环保科技有限公司" value="沈阳圣泰环保科技有限公司"></el-option>
                  <el-option label="辽宁洁元生态环境科技有限公司" value="辽宁洁元生态环境科技有限公司"></el-option>
                  <el-option label="辽宁欧浪环境科技有限公司" value="辽宁欧浪环境科技有限公司"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购买单位名称" required>
                <el-input v-model="invoiceFormData.purchaseUnit" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发票种类" required>
                <el-select v-model="invoiceFormData.invoiceType" placeholder="请选择" style="width: 100%">
                  <el-option label="专用发票" value="专用发票"></el-option>
                  <el-option label="普通发票" value="普通发票"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税号" required>
                <el-input v-model="invoiceFormData.taxNumber" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="地址">
                <el-input v-model="invoiceFormData.address" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="invoiceFormData.phone" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开户行">
                <el-input v-model="invoiceFormData.bank" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号">
                <el-input v-model="invoiceFormData.bankAccount" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="服务开始日期" required>
                <el-date-picker
                  v-model="invoiceFormData.startDate"
                  type="date"
                  placeholder="选择开始日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务结束日期" required>
                <el-date-picker
                  v-model="invoiceFormData.endDate"
                  type="date"
                  placeholder="选择结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开票金额(元)" required>
                <el-input v-model.number="invoiceFormData.invoiceAmount" placeholder="请输入金额" type="number"  @change="handleAmountChange"  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input v-model="invoiceFormData.remark" type="textarea" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitInvoiceFileForm()">开票</el-button>
        <el-button @click="restInvoice()">取 消</el-button>
      </div>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 合同详情弹窗 -->
    <el-dialog
      title="合同详细信息"
      :visible.sync="contractDetailVisible"
      width="80%"
      class="contract-detail-dialog"
      :close-on-click-modal="false"
    >
      <div class="contract-detail-container">
        <div class="detail-grid">
          <!-- 基本信息 -->
          <div class="detail-section">
            <h3 class="section-title">基本信息</h3>
            <div class="detail-row">
              <div class="detail-item">
                <label>合同编号:</label>
                <span>{{ contractDetail.contractCode }}</span>
              </div>
              <div class="detail-item">
                <label>合同名称:</label>
                <span>{{ contractDetail.contractName }}</span>
              </div>
              <div class="detail-item">
                <label>合同类型:</label>
                <span>{{ contractDetail.contractType }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>合同类别:</label>
                <span>{{ contractDetail.contractCategory }}</span>
              </div>
              <div class="detail-item">
                <label>付款方式:</label>
                <span>{{ getPaymentTypeName(contractDetail.paymentType) }}</span>
              </div>
              <div class="detail-item">
                <label>合同状态:</label>
                <span>{{ contractDetail.contractStatus }}</span>
              </div>
            </div>
          </div>

          <!-- 金额信息 -->
          <div class="detail-section">
            <h3 class="section-title">金额信息</h3>
            <div class="detail-row">
              <div class="detail-item">
                <label>合同金额:</label>
                <span class="amount">{{ formatMoney(contractDetail.contractAmount) }}</span>
              </div>
              <div class="detail-item">
                <label>有效金额:</label>
                <span class="amount">{{ formatMoney(contractDetail.effectiveAmount) }}</span>
              </div>
              <div class="detail-item">
                <label>已付金额:</label>
                <span class="amount">{{ formatMoney(contractDetail.paidAmount) }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>利润率:</label>
                <span>{{ contractDetail.profitMargin }}%</span>
              </div>
              <div class="detail-item">
                <label>月产值:</label>
                <span class="amount">{{ formatMoney(contractDetail.monthOutputValue) }}</span>
              </div>
              <div class="detail-item">
                <label>年产值:</label>
                <span class="amount">{{ formatMoney(contractDetail.yearOutputValue) }}</span>
              </div>
            </div>
          </div>

          <!-- 时间信息 -->
          <div class="detail-section">
            <h3 class="section-title">时间信息</h3>
            <div class="detail-row">
              <div class="detail-item">
                <label>签订日期:</label>
                <span>{{ formatDate(contractDetail.signDate) }}</span>
              </div>
              <div class="detail-item">
                <label>开始日期:</label>
                <span>{{ formatDate(contractDetail.startDate) }}</span>
              </div>
              <div class="detail-item">
                <label>结束日期:</label>
                <span>{{ formatDate(contractDetail.endDate) }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>合同周期:</label>
                <span>{{ contractDetail.contractPeriod }}个月</span>
              </div>
              <div class="detail-item">
                <label>首次回款月份:</label>
                <span>{{ formatDate(contractDetail.firstPaymentMonth, 'YYYY-MM') }}</span>
              </div>
              <div class="detail-item">
                <label>最后付款日期:</label>
                <span>{{ formatDate(contractDetail.lastPaymentDate) || '--' }}</span>
              </div>
            </div>
          </div>

          <!-- 客户信息 -->
          <div class="detail-section">
            <h3 class="section-title">客户信息</h3>
            <div class="detail-row">
              <div class="detail-item">
                <label>客户名称:</label>
                <span>{{ contractDetail.clientName }}</span>
              </div>
              <div class="detail-item">
                <label>客户编号:</label>
                <span>{{ contractDetail.clientCode }}</span>
              </div>
              <div class="detail-item">
                <label>客户经理:</label>
                <span>{{ contractDetail.manager }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>所属部门:</label>
                <span>{{ contractDetail.department }}</span>
              </div>
              <div class="detail-item">
                <label>审核状态:</label>
                <span>{{ contractDetail.auditStatus || '--' }}</span>
              </div>
              <div class="detail-item">
                <label>年份:</label>
                <span>{{ contractDetail.year }}</span>
              </div>
            </div>
          </div>

          <!-- 其他信息 -->
          <div class="detail-section">
            <h3 class="section-title">其他信息</h3>
            <div class="detail-row">
              <div class="detail-item">
                <label>创建人:</label>
                <span>{{ contractDetail.createBy }}</span>
              </div>
              <div class="detail-item">
                <label>创建时间:</label>
                <span>{{ formatDate(contractDetail.createTime) }}</span>
              </div>
              <div class="detail-item">
                <label>更新人:</label>
                <span>{{ contractDetail.updateBy || '--' }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>更新时间:</label>
                <span>{{ formatDate(contractDetail.updateTime) || '--' }}</span>
              </div>
              <div class="detail-item full-width">
                <label>备注:</label>
                <span>{{ contractDetail.remark || '--' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="contractDetailVisible = false" size="medium">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 捆绑合同详情弹窗 -->
    <el-dialog
      title="捆绑合同详细信息"
      :visible.sync="bundledContractsDetailVisible"
      width="90%"
      class="bundled-contracts-detail-dialog"
      :close-on-click-modal="false"
    >
      <div class="bundled-contracts-detail-container">
        <div v-if="bundledContracts.length === 0" class="no-data">
          <i class="el-icon-info"></i>
          <span>暂无捆绑合同信息</span>
        </div>
        <div v-else class="contracts-grid">
          <div v-for="(contract, index) in bundledContracts" :key="index" class="contract-card">
            <div class="card-header">
              <h4 class="contract-title">
                <i class="el-icon-document"></i>
                合同 {{ index + 1 }}
              </h4>
              <div class="header-actions">
                <el-tag :type="getContractTypeColor(contract.contractType)" size="small">
                  {{ contract.contractType }}
                </el-tag>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  class="delete-btn"
                  @click="deleteBundledContract(index)"
                  title="删除此合同"
                ></el-button>
              </div>
            </div>
            <div class="card-content">
              <div class="detail-section">
                <h5 class="section-title">基本信息</h5>
                <div class="detail-row">
                  <div class="detail-item">
                    <label>合同前缀:</label>
                    <span>{{ contract.contractPrefix || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>合同名称:</label>
                    <span>{{ contract.contractName || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>合同类型:</label>
                    <span>{{ contract.contractType || '-' }}</span>
                  </div>
                </div>
                <div class="detail-row">
                  <div class="detail-item">
                    <label>合同类别:</label>
                    <span>{{ contract.contractCategory || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>付款方式:</label>
                    <span>{{ getPaymentTypeName(contract.paymentType) || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>合同状态:</label>
                    <span>{{ contract.contractStatus || '-' }}</span>
                  </div>
                </div>
              </div>

              <div class="detail-section">
                <h5 class="section-title">金额信息</h5>
                <div class="detail-row">
                  <div class="detail-item">
                    <label>合同金额:</label>
                    <span class="amount">{{ formatAmount(contract.contractAmount) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>有效金额:</label>
                    <span class="amount">{{ formatAmount(contract.effectiveAmount) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>利润率:</label>
                    <span>{{ contract.profitMargin || '0' }}%</span>
                  </div>
                </div>
              </div>

              <div class="detail-section">
                <h5 class="section-title">时间信息</h5>
                <div class="detail-row">
                  <div class="detail-item">
                    <label>签订日期:</label>
                    <span>{{ formatDate(contract.signDate) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>开始日期:</label>
                    <span>{{ formatDate(contract.startDate) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>结束日期:</label>
                    <span>{{ formatDate(contract.endDate) }}</span>
                  </div>
                </div>
              </div>

              <div class="detail-section">
                <h5 class="section-title">联系信息</h5>
                <div class="detail-row">
                  <div class="detail-item">
                    <label>客户名称:</label>
                    <span>{{ contract.clientName || '-' }}</span>
                  </div>

                </div>
              </div>

              <div v-if="contract.remarks" class="detail-section">
                <h5 class="section-title">备注信息</h5>
                <div class="detail-row">
                  <div class="detail-item full-width">
                    <label>备注:</label>
                    <span>{{ contract.remarks }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bundledContractsDetailVisible = false" size="medium">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 导入结果弹窗 -->
    <el-dialog :title="importResultDialog.title" :visible.sync="importResultDialog.visible" width="500px" append-to-body>
      <div class="import-result-content">
        <div v-if="importResultDialog.isSuccess" class="success-message">
          <i class="el-icon-success" style="color: #67C23A; font-size: 20px; margin-right: 8px;"></i>
          <span style="color: #67C23A; font-weight: bold;">{{ importResultDialog.content }}</span>
        </div>
        <div v-else class="error-message">
          <i class="el-icon-error" style="color: #F56C6C; font-size: 20px; margin-right: 8px;"></i>
          <div style="color: #F56C6C;">
            <div v-for="(line, index) in importResultDialog.content.split('\n')" :key="index" style="margin-bottom: 8px;">
              <span v-if="line.trim()" :style="{ fontWeight: index === 0 ? 'bold' : 'normal' }">{{ line }}</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="importResultDialog.visible = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import moment from 'moment';
import { add,addkunbang, list, update, Clientlist,delContract,addReturnValue,queryMoth,queryInvoiceList,queryContractNumberByLike } from "@/api/monitor/contract";
import { addInvoiceForm,selectInvoiceByContractNumber,queryCustomerInvoiceByClientName,queryStartDateByContractNumber} from "@/api/monitor/customer";
import { queryAvailableAmountByInvoiceId } from "@/api/monitor/invoice";
import { getToken } from "@/utils/auth";
import { getUserProfile } from "@/api/system/user";
export default {
  data() {
    return {
        KaiPiaoContractAmount:'',
        paymentPlanData: [],
            // 月份动态数据
        monthList: [],
        agreedPaymentList: [],
        actualPaymentList: [],
        payment: '',
        // 回款相关
        formLabelWidth: "120px",
        isReturnValueDialogVisible: false,
        returnValueForm: {
          hasInvoice: '1', // 是否有发票
          invoiceId: null, // 选择的发票
          payment: null, // 回款金
          contractCode: '',
          contractAmount: '',
        },
        invoiceList: [], // 发票列表，从数据库查询
        returnValueDetails: [],
        contractAmount: 10000, // 假设的合同金额
        user: {},
        // 部门选项
        departmentOptions: [
          { value: '市场部', label: '市场部' },
          { value: '在线运营部', label: '在线运营部' } ,
          { value: '污水运营部', label: '污水运营部' },
          { value: '总经办', label: '总经办' }
        ],
        tableHeight: 500, // 表格高度
        // 付款方式映射
        paymentTypeMap: {
          1: '月付',
          2: '季付',
          3: '半年付',
          4: '年付',
          5: '验收后',
          6: '其他'
        },
        isEdit: false,
        // 捆绑合同临时存储
        bundledContracts: [],
        // 合同详情弹窗相关
        contractDetailVisible: false,
        contractDetail: {},
        // 捆绑合同详情弹窗相关
        bundledContractsDetailVisible: false,
        // 审核状态映射
        auditStatusMap: {
          'pending': '待审核',
          'approved': '已审核',
          'rejected': '已驳回'
        },

      // 文件上传相关
      uploadUrl: process.env.VUE_APP_BASE_API + "/api/common/upload", // 文件上传接口地址
      fileList: [], // 已上传的文件列表
      headers: {
        Authorization: "Bearer " + getToken(),// 如果需要认证
      },

      invoiceDetails: [],
      visible: false,
      invoiceVisible: false,
      invoiceForm: {
        amount: "",
        type: "",
        description: "",
      },
      rules: {},
      invoiceRules: {
        amount: [
          { required: true, message: "请输入开票金额", trigger: "blur" },
          { type: "number", message: "金额必须为数字" },
        ],
        type: [
          { required: true, message: "请选择开票类型", trigger: "change" },
        ],
      },
      //开票申请 数据
      availableAmount: '',
      invoiceFormData: {
        agent: null,
        department: null,
        applicationDate: null,
        paymentStatus: null,
        contractNumber: '',
        applyUnit: null,
        purchaseUnit: '',
        invoiceType: null,
        taxNumber: '',
        address: '',
        phone:'',
        bank: '',
        bankAccount: '',
        invoiceContent: '',
        invoiceAmount: null,
        remark: '',
        startDate: '', // 默认开始日期
        endDate: '' // 默认结束日期为空
      },

      // 搜索表单数据
      formData: {
        pageNum: 1,
        pageSize: 15,
        contractCode: "",
        clientName: "",
        contractType: "",
        manager: "",
        endDate: "",
        startDate: "",
        auditStatus: "",
      },

      // 表格数据
      tableData: [],
      total: 0,
      selectedRow: null,
      selectedRows: [], // 批量选择的行数据

      // 客户经理选项
      managerOptions: [
        { value: "1", label: "张经理" },
        { value: "2", label: "李经理" },
        { value: "3", label: "王经理" },
      ],

      // 模拟客户数据
      clientList: [],

      // 对话框相关
      dialogVisible: false,
      dialogTitle: "新增合同",
      invoiceDialogVisible: false,
      invoiceDetailDialogVisible: false,
      contractTypeDialogVisible: false,

      // 合同类型选择表单
      contractTypeForm: {
        contractCategory: ''
      },

      // 表单数据
      dialogForm: {
        contractName:'',
        contractCode:'',
        contractPrefix: '',
        contractSuffix: '',
        contractType: '',
        contractCategory: '', // 新增合同分类字段
        paymentType: '',
        contractAmount: 0,
        effectiveAmount:'',
        paidAmount: 0,
        contractPeriod: 12,
        signDate: '',
        endDate: '',
        firstPaymentMonth: '',
        lastPaymentDate: '',
        manager: '',
        department: '',
        clientName: '',
        clientCode: '',
        auditStatus: 'pending'  ,
        filepath:'',
        remark: '',
        contractStatus: '',
        profitMargin: '',
      },
      dialogRules: {
        contractPrefix: [{ required: true, message: '请选择合同前缀', trigger: 'blur' }],
        contractSuffix: [{ required: true, message: '请选择合同后缀', trigger: 'blur' }],
        contractType: [{ required: true, message: '请选择合同类型', trigger: 'blur' }],
        paymentType: [{ required: true, message: '请选择付款方式', trigger: 'blur' }],
        contractAmount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
        signDate: [{ required: true, message: '请选择签约时间', trigger: 'blur' }],
        startDate: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        effectiveAmount : [{ required: true, message: '请输入有效金额', trigger: 'blur' }],
        manager: [{ required: true, message: '请选择客户经理', trigger: 'blur' }],
        clientName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        hasInvoice: [{ required: true, message: '请选择发票状态', trigger: 'blur' }],
        invoiceId: [{  required: true,
            validator: (rule, value, callback) => {
              if (this.returnValueForm.hasInvoice === '1' && !value) {
                callback(new Error('请选择发票'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
      }]
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "Export/importContractList"
      },
      // 导入结果弹窗
      importResultDialog: {
        visible: false,
        title: '导入结果',
        content: '',
        isSuccess: false
      },
      hideDateFields: false,
      // 金额显示变量
      contractAmountDisplay: '',
      effectiveAmountDisplay: '',
    };
  },
    computed: {
      totalReturnAmount() {
        return this.returnValueDetails.reduce((sum, detail) => sum + detail.payment, 0);
      }
    },
    mounted() {
      this.calculateTableHeight()
      // 监听窗口大小变化，动态调整表格高度
      window.addEventListener('resize', this.calculateTableHeight)
    },
    beforeDestroy() {
      // 组件销毁前移除监听器
      window.removeEventListener('resize', this.calculateTableHeight)
    },
    created() {
      this.getList();
      this.getClientList();
      this.getUser();
    },

    methods: {
      // 显示捆绑合同详情弹窗
    showBundledContractsDetail() {
      this.bundledContractsDetailVisible = true;
    },
    // 删除捆绑合同
    deleteBundledContract(index) {
      this.$confirm('确定要删除这个合同吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.bundledContracts.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

      // 获取合同类型对应的标签颜色
      getContractTypeColor(contractType) {
        const colorMap = {
          '在线运营': 'success',
          '污水运营': 'primary',
          '在线建设': 'warning',
          '污水建设': 'info',
          '其他': 'default'
        };
        return colorMap[contractType] || 'default';
      },

      // 格式化金额显示
      formatAmount(amount) {
        if (!amount && amount !== 0) return '-';
        return parseFloat(amount).toLocaleString('zh-CN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }) + '元';
      },

      // 格式化日期显示
      formatDate(date) {
        if (!date) return '-';
        return moment(date).format('YYYY-MM-DD');
      },

      // 计算序列号，考虑分页
      indexMethod(index) {
        return (this.formData.pageNum - 1) * this.formData.pageSize + index + 1;
      },

      handleAmountChange(value) {
        if (value > this.KaiPiaoContractAmount) {
          this.$message.error('开票金额不能大于合同金额 合同金额：'+this.KaiPiaoContractAmount);
        }
      },

       getContractStatus(endDate,contractType) {
        if(contractType==='在线建设' || contractType==='污水建设' || contractType==='其他'){
          return '--'
        }
        const currentDate = new Date(); // 获取当前时间
        const endDateObj = new Date(endDate); // 将 endDate 转换为 Date 对象
        if (currentDate > endDateObj) {
          return '履行完成'; // 当前时间大于到期时间
        } else {
          return '执行中'; // 当前时间小于等于到期时间
        }
      },
       // 查看开票明细
      viewInvoiceDetail(row) {
        selectInvoiceByContractNumber(row.contractCode).then(response => {
          this.invoiceDetails = response.data
          console.log(response)
          this.getList();
        });
        this.invoiceDetailDialogVisible = true;
      },

      submitInvoiceFileForm(){
        if (this.invoiceFormData.invoiceAmount > this.KaiPiaoContractAmount) {
          this.$message.error('开票金额不能大于合同金额');
          this.invoiceFormData.invoiceAmount = null; // 清空输入
          return false ;
        }
        this.invoiceFormData.agent =this.user.userName

        //时间类型转换
        this.invoiceFormData.applicationDate = this.formatDateForSearch(new Date());
        this.invoiceFormData.startDate = this.formatDateForSearch(this.invoiceFormData.startDate );
        this.invoiceFormData.endDate = this.formatDateForSearch(this.invoiceFormData.endDate );
        console.log(this.invoiceFormData)
        addInvoiceForm(this.invoiceFormData).then(response => {
          if (response === 2) {
            this.$message.error('合同号不存在，请检查合同号');
            return false ;
          } else if (response === 3) {
            this.$message.error('已开发票总额超过合同金额');
            return false ;
          } else {
            this.$modal.msgSuccess("开票成功");
            this.restInvoice();
            this.getList();
          }
        });
      },
       // 申请开票
      handleInvoiceApply(row) {
        console.log(row);
        this.KaiPiaoContractAmount = row.contractAmount;

        queryStartDateByContractNumber(row.contractCode).then(response => {

                this.invoiceFormData.startDate = response.msg;
              });
        queryCustomerInvoiceByClientName(row.clientName).then(response => {

                this.invoiceFormData.contractNumber = row.contractCode;
                this.invoiceFormData.purchaseUnit = response.data.invoiceName;
                this.invoiceFormData.phone = response.data.invoicePhone;
                this.invoiceFormData.address = response.data.invoiceAddress;
                this.invoiceFormData.bank = response.data.bankName;
                this.invoiceFormData.bankAccount = response.data.bankAccount;
                this.invoiceFormData.taxNumber = response.data.taxNumber;
        });
        this.invoiceDialogVisible = true;
      },
      restInvoice(){
        this.invoiceDialogVisible = false;
        this.invoiceFormData = {
          agent: null,
          department: null,
          applicationDate: null,
          paymentStatus: null,
          contractNumber: '',
          applyUnit: null,
          purchaseUnit: '',
          invoiceType: null,
          taxNumber: '',
          address: '',
          phone:'',
          bank: '',
          bankAccount: '',
          invoiceContent: '',
          invoiceAmount: null,
          remark: '',
        }


      },


      // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
      // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log(111111111);
      console.log(response);
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      
      // 判断是否导入成功
      const isSuccess = response.msg && (response.msg.includes('全部导入成功') || response.msg.includes('上传成功'));
      
      this.importResultDialog = {
        visible: true,
        title: '导入结果',
        content: response.msg || '导入完成',
        isSuccess: isSuccess
      };
      
      this.getList();
    },

      // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },

       /** 下载模板操作 */
    importTemplate() {
      this.download('/Export/exportContractTemplate', {}, `合同信息模版_${this.getNowDateStr()}.xlsx`)
    },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {

            if (this.form.userId != undefined) {
              updateUser(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addUser(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },

       getNowDateStr() {
        const now = new Date();
        return now.getFullYear() +
          String(now.getMonth() + 1).padStart(2, '0') +
          String(now.getDate()).padStart(2, '0') +
          String(now.getHours()).padStart(2, '0') +
          String(now.getMinutes()).padStart(2, '0');
      },

      // 取消按钮
      cancel() {
        this.open = false;
      },
      // 导入
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      // 导出
      handleExport() {
        this.download('contract/export', {
          ...this.formData
        }, `contract_${this.getNowDateStr()}.xlsx`)
      },

      query(data){
         queryMoth(data).then(response => {
          this.monthList = response.monthList;
          this.agreedPaymentList =  response.agreedPaymentList;
          this.actualPaymentList =  response.actualPaymentList;
          this.paymentPlanData = [
            {
              type: '回款信息',
              agreedPayments: this.agreedPaymentList,
              actualPayments: this.actualPaymentList,
            }
          ];


          this.isReturnValueDialogVisible = true;
         });

      },
      queryAvailableAmountByInvoiceId(value) {
        console.log("value",value)
        //增加是null的判断
        if(value == null){
          this.availableAmount = 0;
          return;
        }
        queryAvailableAmountByInvoiceId(value).then(response => {
          this.availableAmount = response.msg;
          console.log("AvailableAmount",response)
        });
      },

    // 处理发票选择变化
    handleInvoiceChange(value) {
      this.returnValueForm.invoiceId = value;
      console.log("value")
      console.log(value)
      this.queryAvailableAmountByInvoiceId(value);

      // 这里可以根据选择的发票动态设置回款金额
      // 例如：this.returnValueForm.payment = someValue;
    },

    openReturnValueDialog(row) {
      console.log(row)
      this.returnValueForm.contractCode = row.contractCode ,
      this.invoiceList = [];
      this.contractAmount = row.contractAmount;
      this.returnValueForm.payment = '';
      this.returnValueDetails = []; // 清空之前的回款明细
      this.query(this.returnValueForm);
      this.queryInvoiceList(row.contractCode);


    },
    queryInvoiceList(contractCode){
      queryInvoiceList(contractCode).then(response => {
        console.log("queryInvoiceList",response)
        this.invoiceList=response;
      });
    },
    addReturnValue() {
      console.log(1555556,this.returnValueForm);
      if(this.returnValueForm.hasInvoice == "0"){ // 未有发票时清空发票ID
        this.returnValueForm.invoiceId = null;
      } else { // 已有发票时验证发票是否选择
        if (!this.returnValueForm.invoiceId) {
          this.$message.error('请选择发票信息');
          return false;
        }
      }
      if (!this.returnValueForm.payment) {
        this.$message.error('请输入回款金额');
        return false ;
      }

      addReturnValue(this.returnValueForm).then(response => {
        console.log(1111111111,response)
        if (response === 3) {
            this.$message.error('回款金额大于合同金额');
            return false ;
          } else if (response === 4) {
            this.$message.error('未达到月份回款要求');
            return false ;
          }else if (response === 5) {
            this.$message.error('回款金额大于发票可用金额');
            return false ;
          } else {
            this.queryAvailableAmountByInvoiceId(this.returnValueForm.invoiceId);
            this.queryInvoiceList(this.returnValueForm.contractCode);
            this.invoiceList = [];
            this.$message.success("增加一次回款");
            // this.isReturnValueDialogVisible = false;
            this.query(this.returnValueForm);//重置回款列表信息
            this.loading = false;
          }

      });
    },

    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },

    // 计算表格高度
      calculateTableHeight() {
      // 可以根据实际情况调整计算逻辑
      this.tableHeight = window.innerHeight - 300 // 300是其他元素占用的空间高度
    },
    // 格式化金额（用于显示千位分隔符和两位小数）
    formatMoney(value) {
      if (!value && value !== 0) return ''
      // 转换为数字并保留两位小数
      const num = parseFloat(value).toFixed(2)
      // 添加千位分隔符
      return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },

    // 解析金额（移除千位分隔符）
    parseMoney(value) {
      return value.replace(/,/g, '')
    },

    // 显示合同详情
    showContractDetail(row) {
      this.contractDetail = { ...row };
      this.contractDetailVisible = true;
    },

    // 获取付款方式名称
    getPaymentTypeName(paymentType) {
      return this.paymentTypeMap[paymentType] || '未知';
    },

    // 格式化日期（用于显示，避免时区转换问题）
    formatDate(date, format = 'YYYY-MM-DD') {
      if (!date) return ''
      // 直接提取日期字符串部分，避免时区转换
      if (typeof date === 'string' && date.includes('T')) {
        return date.split('T')[0]
      }
      return moment(date).format(format)
    },

    // 格式化日期（用于搜索条件，使用本地时间）
    formatDateForSearch(date, format = 'YYYY-MM-DD') {
      if (!date) return null
      return moment(date).format(format)
    },

    // 获取审核状态对应的类型
    getAuditStatusType(status) {
      const typeMap = {
        'pending': 'warning',
        'approved': 'success',
        'rejected': 'danger'
      }
      return typeMap[status] || 'info'
    },



    // 搜索处理
    handleSearch() {
      this.formData.pageNum = 1
      this.formData.endDate=this.formatDateForSearch(this.formData.endDate);
      this.formData.startDate=this.formatDateForSearch(this.formData.startDate);
      console.log('格式化后',this.formData)
      this.getList()
    },

    // 文件上传前的验证
    beforeUpload(file) {
      // 处理文件上传前的验证
      const isValidType = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].includes(file.type)
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isValidType) {
        this.$message.error('只能上传PDF/Word/Excel文件!')
      }
      if (!isLt10M) {
        this.$message.error('文件大小不能超过 10MB!')
      }
      return isValidType && isLt10M
    },

    // 文件上传成功
    handleUploadSuccess(response, file, fileList) {

      // 检查 response 是否有 `status` 和 `message` 这样的属性
      if (response && response.status === 200) {
        this.$message.success(response.message || "文件上传成功");
        // 假设响应中包含文件路径字段，这里用 `fileUrl` 作为字段名
        this.dialogForm.contractFile = response.fileUrl; // 保存文件路径
        this.fileList = fileList;
      } else {
        this.$message.error(response.message || "文件上传失败");
      }
    },

    // 文件删除
    handleRemove(file, fileList) {
      this.fileList = fileList;
      if (this.dialogForm.contractFile === file.url) {
        this.dialogForm.contractFile = "";
      }
    },

    // 文件预览
    handlePreview(file) {
      // 根据文件类型决定预览方式
      if (file.url) {
        window.open(file.url);
      }
    },

    // 清空文件列表
    clearFileList() {
      this.fileList = [];
      this.dialogForm.contractFile = "";
    },

    // 重写handleAdd方法，先显示合同类型选择对话框
    handleAdd() {
      // 重置合同类型选择表单
      this.contractTypeForm.contractCategory = '';
      // 显示合同类型选择对话框
      this.contractTypeDialogVisible = true;
    },

    // 确认合同类型选择
    confirmContractType() {
      if (!this.contractTypeForm.contractCategory) {
        this.$message.warning('请选择合同类型');
        return;
      }

      // 关闭合同类型选择对话框
      this.contractTypeDialogVisible = false;

      // 如果是新的捆绑合同流程，清空之前的临时存储
      if (this.contractTypeForm.contractCategory === '捆绑合同') {
        this.bundledContracts = [];
      }

      // 设置对话框标题和表单数据
      this.dialogTitle = "新增合同";
      this.dialogForm = this.getEmptyDialogForm();
      this.dialogForm.contractCategory = this.contractTypeForm.contractCategory;
      this.isEdit = false;
      this.clearFileList();
      // 初始化金额显示变量
      this.contractAmountDisplay = '';
      this.effectiveAmountDisplay = '';
      // 显示新增合同对话框
      this.dialogVisible = true;
    },

    // 修改编辑和删除方法,移除选择行的判断
    handleEdit(row) {
      this.isEdit = true;
      this.dialogTitle = '编辑合同'
      this.dialogForm = { ...row }
      // 初始化金额显示变量
      this.contractAmountDisplay = this.dialogForm.contractAmount ? this.dialogForm.contractAmount.toString() : '';
      this.effectiveAmountDisplay = this.dialogForm.effectiveAmount ? this.dialogForm.effectiveAmount.toString() : '';
      // 如果有已上传的文件,需要加载到fileList中
      if (this.dialogForm.contractFile) {
        this.fileList = [{
          name: '已上传文件',
          url: this.dialogForm.contractFile
        }]
      } else {
        this.clearFileList()
      }
      this.dialogVisible = true
    },

    // 获取列表数据
    getClientList() {
      Clientlist().then(response => {

        this.clientList = response
        // this.tableData = response.rows;
        // this.total = response.total;

      });
    },

    // 获取列表数据
    getList() {
      this.loading = true;
      console.log(77777777,this.formData)
      list(this.formData).then(response => {
        console.log(5555555,response)
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 删除
    handleDelete() {
      if (!this.selectedRow) {
        this.$message.warning("请选择要删除的记录");
        return;
      }

      this.dialogForm = { ...this.selectedRow };

      const contractCode = this.dialogForm.contractCode;
      this.$modal.confirm('确认删除该客户吗？').then(function() {
        return delContract(contractCode);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

    // 表格选择改变
    handleSelectionChange(selection) {
      this.selectedRow = selection.length === 1 ? selection[0] : null;
      this.selectedRows = selection; // 保存所有选中的行
    },

    // 客户名称搜索
    queryClientAsync(queryString, cb) {

      const results = queryString
        ? this.clientList.filter((client) =>
            client.name.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.clientList;
      cb(results.map((client) => ({ value: client.name, data: client })));
    },

    // 客户选择处理
    handleClientSelect(item) {
      this.dialogForm.clientCode = item.data.code;
      this.dialogForm.contractName = item.value; // 同步合同名称为客户名称
    },

    // 合同文件上传
    handleFileUpload(file) {
      this.dialogForm.contractFile = file;
    },

    // 提交表单
    submitDialog() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
            // 普通合同和补充合同的提交逻辑
            const submitFunction = this.isEdit ? update : add;
            console.log(this.dialogForm.manager)
            this.dialogForm.manager = this.user.userName
            submitFunction(this.dialogForm).then(response => {
              if (response.code === 200) {
                this.$message.success(this.isEdit ? '修改成功' : '新增成功');
                this.dialogVisible = false;
                this.getList();
              }
            });
          }
      });
    },

    // 获取空的对话框表单数据
    getEmptyDialogForm() {
      return {
        contractPrefix: "",
        contractSuffix: "",
        clientName: "",
        clientCode: "",
        contractType: "",
        contractCategory: "", // 新增合同分类字段
        contractAmount: "",
        effectiveAmount: "",
        paymentType: "",
        manager: "",
        paidAmount: "",
        firstPaymentMonth: "",
        signDate: "",
        auditStatus: "",
        startDate: "",
        contractPeriod: "",
        contractFile: null,
      };
    },
    handleContractTypeChange(value) {
      this.hideDateFields = ['在线建设','污水建设'].includes(value) && !this.isEdit;
      if(this.hideDateFields) {
        this.$refs.dialogForm.clearValidate(['endDate', 'firstPaymentMonth']);
        this.dialogForm.endDate = null;
        this.dialogForm.firstPaymentMonth = null;
      }
    },

    // 编辑选中项
    handleEditSelected() {
      if (this.selectedRows.length !== 1) {
        this.$message.warning('请选择一条数据进行编辑');
        return;
      }
      this.handleEdit(this.selectedRows[0]);
    },

    // 申请开票选中项
    handleInvoiceApplySelected() {
      if (this.selectedRows.length !== 1) {
        this.$message.warning('请选择一条数据进行申请开票');
        return;
      }
      this.handleInvoiceApply(this.selectedRows[0]);
    },

    // 查看开票明细选中项
    viewInvoiceDetailSelected() {
      if (this.selectedRows.length !== 1) {
        this.$message.warning('请选择一条数据查看开票明细');
        return;
      }
      this.viewInvoiceDetail(this.selectedRows[0]);
    },

    // 增加回款选中项
    openReturnValueDialogSelected() {
      if (this.selectedRows.length !== 1) {
        this.$message.warning('请选择一条数据进行增加回款');
        return;
      }
      this.openReturnValueDialog(this.selectedRows[0]);
    },

    // 金额格式化显示方法
    formatMoneyDisplay(value) {
      if (!value && value !== 0) return '';
      // 转换为数字并保留两位小数
      const num = parseFloat(value).toFixed(2);
      // 添加千位分隔符
      return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },

    // 处理合同金额输入
    handleContractAmountInput(value) {
      // 移除非数字字符（保留小数点）
      const numericValue = value.replace(/[^\d.]/g, '');
      this.contractAmountDisplay = numericValue;
      // 确保 dialogForm 中的值也被更新，避免验证失败
      if (numericValue && !isNaN(parseFloat(numericValue))) {
        this.dialogForm.contractAmount = parseFloat(numericValue);
        // 手动清除验证错误
        this.$nextTick(() => {
          this.$refs.dialogForm && this.$refs.dialogForm.clearValidate(['contractAmount']);
        });
      } else {
        this.dialogForm.contractAmount = '';
      }
    },

    // 处理有效金额输入
    handleEffectiveAmountInput(value) {
      // 移除非数字字符（保留小数点）
      const numericValue = value.replace(/[^\d.]/g, '');
      this.effectiveAmountDisplay = numericValue;
      // 确保 dialogForm 中的值也被更新，避免验证失败
      if (numericValue && !isNaN(parseFloat(numericValue))) {
        this.dialogForm.effectiveAmount = parseFloat(numericValue);
        // 手动清除验证错误
        this.$nextTick(() => {
          this.$refs.dialogForm && this.$refs.dialogForm.clearValidate(['effectiveAmount']);
        });
      } else {
        this.dialogForm.effectiveAmount = '';
      }
    },

    // 格式化合同金额显示
    formatContractAmountDisplay() {
      if (this.dialogForm.contractAmount) {
        this.contractAmountDisplay = this.formatMoneyDisplay(this.dialogForm.contractAmount);
      }
    },

    // 格式化有效金额显示
    formatEffectiveAmountDisplay() {
      if (this.dialogForm.effectiveAmount) {
        this.effectiveAmountDisplay = this.formatMoneyDisplay(this.dialogForm.effectiveAmount);
      }
    },

    // 继续创建捆绑合同
    continueCreate() {
      // 验证当前表单
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // 保存当前合同到临时数组
          const currentContract = { ...this.dialogForm };
          if (!this.bundledContracts) {
            this.bundledContracts = [];
          }
          this.bundledContracts.push(currentContract);

          // 让用户选择继续创建还是提交
          this.$confirm('请选择操作：', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '提交所有合同',
            cancelButtonText: '继续创建',
            type: 'info'
          }).then(() => {
            // 用户选择提交 - 调用addkunbang接口提交所有捆绑合同
            this.submitBundledContracts();
          }).catch(action => {
            if (action === 'cancel') {
              // 用户选择继续创建
              this.$message.success('已保存当前合同，请继续填写下一个捆绑合同');
              // 重置表单但保持捆绑合同类型
              this.dialogForm = this.getEmptyDialogForm();
              this.dialogForm.contractCategory = '捆绑合同';
              this.clearFileList();
              // 初始化金额显示变量
              this.contractAmountDisplay = '';
              this.effectiveAmountDisplay = '';
            }
          });
        }
      });
    },

    // 合同编号模糊查询（用于补充合同）
    queryContractNumberAsync(queryString, cb) {

      console.log('queryString', queryString);
      if (!queryString) {
        cb([]);
        return;
      }
      queryContractNumberByLike(queryString).then(response => {
        console.log('查询合同成功:', response);
        // 将字符串数组转换为el-autocomplete需要的对象数组格式
        const suggestions = response.map(item => ({
          value: item
        }));
        console.log('转换后的建议:', suggestions);
        cb(suggestions);
      }).catch(error => {
        console.error('查询合同失败:', error);
      }).finally(() => {
        this.loading = false;
      });
    },

    // 提交所有捆绑合同
    submitBundledContracts() {
      if (!this.bundledContracts || this.bundledContracts.length === 0) {
        this.$message.warning('没有要提交的捆绑合同数据');
        return;
      }
      this.loading = true;
      addkunbang(this.bundledContracts).then(response => {
        this.$modal.msgSuccess("捆绑合同提交成功");
        this.dialogVisible = false;
        this.bundledContracts = []; // 清空临时数据
        this.getList(); // 刷新列表
      }).catch(error => {
        console.error('提交捆绑合同失败:', error);
        this.$modal.msgError("捆绑合同提交失败");
      }).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>

/* 导入结果弹窗样式 */
.import-result-content {
  padding: 20px 0;
  text-align: left;
}

.success-message {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.error-message {
  display: flex;
  align-items: flex-start;
}

.error-message > div {
  flex: 1;
  line-height: 1.6;
}

.error-message div > div {
  word-break: break-all;
  white-space: pre-wrap;
}

/* 弹窗整体样式 */
.contract-dialog {
  border-radius: 8px;
}

.contract-dialog :deep(.el-dialog) {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.contract-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px 8px 0 0;
  padding: 20px 24px;
}

.contract-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.contract-dialog :deep(.el-dialog__close) {
  color: white;
  font-size: 20px;
}

.contract-dialog :deep(.el-dialog__close:hover) {
  color: #f0f0f0;
}

.contract-dialog :deep(.el-dialog__body) {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

/* 对话框内容区域 */
.dialog-content {
  padding: 24px;
  background-color: #fafbfc;
}

/* 表单样式 */
.contract-form {
  background: transparent;
}

/* 合同类型选择对话框样式 */
.contract-type-dialog {
  border-radius: 8px;
}

.contract-type-dialog :deep(.el-dialog) {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.contract-type-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px 8px 0 0;
  padding: 20px 24px;
}

.contract-type-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.contract-type-dialog :deep(.el-dialog__close) {
  color: white;
  font-size: 20px;
}

.contract-type-dialog :deep(.el-dialog__close:hover) {
  color: #f0f0f0;
}

.contract-type-content {
  padding: 30px 20px;
}

.contract-type-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.contract-type-title i {
  font-size: 20px;
  color: #409EFF;
}

.contract-type-radio-group {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.contract-type-radio {
  flex: 1;
  margin-right: 0;
  margin-bottom: 0;
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  padding: 0;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.contract-type-radio:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.contract-type-radio.is-checked {
  border-color: #409EFF;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.25);
}

.contract-type-radio .el-radio__input {
  display: none;
}

.radio-content {
  padding: 25px 15px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.radio-content i {
  font-size: 36px;
  color: #909399;
  margin-bottom: 0;
  transition: all 0.3s;
}

.contract-type-radio.is-checked .radio-content i {
  color: #409EFF;
  transform: scale(1.1);
}

.radio-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 2px;
}

.radio-desc {
  font-size: 14px;
  color: #909399;
  line-height: 1.4;
}

.contract-type-radio.is-checked .radio-title {
  color: #409EFF;
}

.contract-type-radio.is-checked .radio-desc {
  color: #666;
}

/* 表单板块样式 */
.form-section {
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8eaec;
  transition: all 0.3s ease;
}

.form-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: #d4d7de;
}

/* 板块标题样式 */
.section-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2f5;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1px;
}

.section-title i {
  margin-right: 8px;
  font-size: 18px;
  color: #667eea;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 20px;
}

.contract-form :deep(.el-form-item__label) {
  color: #606266;
  font-weight: 500;
  line-height: 32px;
}

.contract-form :deep(.el-input__inner),
.contract-form :deep(.el-textarea__inner) {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.contract-form :deep(.el-input__inner:focus),
.contract-form :deep(.el-textarea__inner:focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.contract-form :deep(.el-select .el-input__inner) {
  cursor: pointer;
}

/* 上传组件样式 */
.upload-container {
  width: 100%;
}

.upload-container :deep(.el-upload-dragger) {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  background-color: #fafbfc;
  transition: all 0.3s ease;
  padding: 40px 20px;
}

.upload-container :deep(.el-upload-dragger:hover) {
  border-color: #667eea;
  background-color: #f8f9ff;
}

.upload-container :deep(.el-upload__text) {
  color: #606266;
  font-size: 14px;
  margin-top: 12px;
}

.upload-container :deep(.el-upload__text em) {
  color: #667eea;
  font-style: normal;
  font-weight: 500;
}

.upload-container :deep(.el-icon-upload) {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

/* 底部按钮样式 */
.dialog-footer {
  text-align: right;
  padding: 20px 24px;
  background: white;
  border-top: 1px solid #e8eaec;
  border-radius: 0 0 8px 8px;
}

.dialog-footer .el-button {
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 500;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.dialog-footer .el-button--primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .contract-dialog {
    width: 95% !important;
  }

  .dialog-content {
    padding: 16px;
  }

  .form-section {
    padding: 16px;
  }
}

/* 滚动条样式 */
.dialog-content::-webkit-scrollbar {
  width: 6px;
}

.dialog-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.dialog-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 调整日期选择器宽度 */
:deep(.el-date-editor.el-input) {
  width: 100%;
}

/* 调整select宽度 */
:deep(.el-select) {
  width: 100%;
}

/* 调整autocomplete宽度 */
:deep(.el-autocomplete) {
  width: 100%;
}

/* 调整input-number宽度 */
:deep(.el-input-number) {
  width: 100%;
}
.table-container {
  width: 100%;
  margin: 20px 0;
}

/* 方式一：使用 ::v-deep */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 4px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: #f5f7fa;
}

::v-deep .el-table td {
  padding: 8px 0;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa;
}

::v-deep .el-table__fixed-right::before,
::v-deep .el-table__fixed::before {
  background-color: #ebeef5;
}

/* 或者方式二：使用 :deep() （Vue 3 推荐） */
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: #dcdfe6;
  border-radius: 4px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #f5f7fa;
}

:deep(.el-table td) {
  padding: 8px 0;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f5f7fa;
}

:deep(.el-table__fixed-right::before),
:deep(.el-table__fixed::before) {
  background-color: #ebeef5;
}


.el-table {
  margin-top: 20px;
}

/* 金额右对齐 */
.el-table .cell {
  text-align: left;
}

/* 调整表格内容的行高 */
.el-table td {
  padding: 8px 0;
}

/* 设置表格最大高度，超出显示滚动条 */
.el-table {
  max-height: calc(100vh - 300px);
}

/* 调整操作列按钮间距 */
.el-button--text {
  margin: 0 5px;
}

/* 确保金额列右对齐 */
.el-table .amount-column {
  text-align: right;
}

.el-form {
  padding: 20px;
}

.el-table {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-row {
  margin-bottom: 20px;
}

/* 上传文件区域样式 */
.upload-container {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 10px;
}

.upload-container:hover {
  border-color: #409eff;
}

/* 分页样式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 对话框中的表单布局 */
.dialog-form-container {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 20px;
}

/* 自定义表格样式 */
.custom-table {
  width: 100%;
  margin-top: 15px;
}

.custom-table .cell {
  padding: 8px 0;
}

/* 按钮组样式 */
.button-group {
  margin-bottom: 20px;
}

.button-group .el-button {
  margin-right: 10px;
}

/* 批量操作按钮区域样式 */
.btn-section {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.btn-section .el-button {
  margin-right: 8px;
  margin-bottom: 5px;
}

.btn-section .el-button:disabled {
  opacity: 0.6;
}

.btn-section .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.btn-section .el-button--success {
  background-color: #67c23a;
  border-color: #67c23a;
}

.btn-section .el-button--warning {
  background-color: #e6a23c;
  border-color: #e6a23c;
}

/* 捆绑合同信息显示样式 */
.bundled-contracts-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f0f9ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
}

.bundled-contracts-info .info-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
  color: #1e40af;
}

.bundled-contracts-info .info-header i {
  margin-right: 8px;
  font-size: 16px;
}

.bundled-contracts-info .contracts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bundled-contracts-info .contract-tag {
  margin: 0;
  padding: 4px 8px;
  background-color: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}

.btn-section .el-button--info {
  background-color: #909399;
  border-color: #909399;
}

/* 添加操作按钮的样式 */
.el-button--text {
  padding: 2px 0;
  margin: 0 5px;
}

/* 合同类别按钮样式 */
.contract-category-btn {
  color: #409eff;
  font-weight: 500;
  text-decoration: none;
}

.contract-category-btn:hover {
  color: #66b1ff;
  text-decoration: underline;
}


.contract-detail-container {
  padding: 30px;
}

.detail-grid {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.detail-section {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.detail-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.detail-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.detail-section:nth-child(1) .section-title::before {
  content: '📄';
  margin-right: 10px;
  font-size: 20px;
}

.detail-section:nth-child(2) .section-title::before {
  content: '💰';
  margin-right: 10px;
  font-size: 20px;
}

.detail-section:nth-child(3) .section-title::before {
  content: '⏰';
  margin-right: 10px;
  font-size: 20px;
}

.detail-section:nth-child(4) .section-title::before {
  content: '👥';
  margin-right: 10px;
  font-size: 20px;
}

.detail-section:nth-child(5) .section-title::before {
  content: '📝';
  margin-right: 10px;
  font-size: 20px;
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 18px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-item {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #e9ecef;
  transition: all 0.3s ease;
}

.detail-item:hover {
  background: #e3f2fd;
  border-left-color: #2196f3;
  transform: translateX(3px);
}

.detail-item.full-width {
  flex: 100%;
  align-items: flex-start;
  min-height: 60px;
}

.detail-item label {
  font-weight: 600;
  color: #34495e;
  margin-right: 12px;
  min-width: 90px;
  white-space: nowrap;
  font-size: 14px;
}

.detail-item span {
  color: #2c3e50;
  word-break: break-all;
  font-size: 14px;
  line-height: 1.5;
}

.detail-item .amount {
  color: #e67e22;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* 响应式设计 */
@media (max-width: 768px) {
  .detail-row {
    flex-direction: column;
    gap: 10px;
  }

  .detail-item {
    min-width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-item label {
    margin-bottom: 4px;
  }
}

.el-button--text:hover {
  color: #66b1ff;
}

.el-button--text[style*="color: red"]:hover {
  color: #ff4949;
}

/* 合同详情弹窗美化样式 */
/deep/ .contract-detail-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: dialogFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-height: 100vh;
}

@keyframes dialogFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/deep/ .contract-detail-dialog .el-dialog {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/deep/ .contract-detail-dialog .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: white;
  padding: 30px 35px;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

/deep/ .contract-detail-dialog .el-dialog__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sparkle" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="0.5" fill="%23ffffff" opacity="0.3"/><circle cx="15" cy="15" r="0.3" fill="%23ffffff" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23sparkle)"/></svg>') repeat;
  pointer-events: none;
  animation: headerShimmer 3s ease-in-out infinite;
}

@keyframes headerShimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/deep/ .contract-detail-dialog .el-dialog__title {
  color: white;
  font-size: 22px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  letter-spacing: 0.5px;
}

/deep/ .contract-detail-dialog .el-dialog__title::before {
  content: '📋';
  margin-right: 12px;
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: titleIconBounce 2s ease-in-out infinite;
}

@keyframes titleIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/deep/ .contract-detail-dialog .el-dialog__headerbtn {
  position: relative;
  z-index: 1;
}

/deep/ .contract-detail-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/deep/ .contract-detail-dialog .el-dialog__headerbtn .el-dialog__close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/deep/ .contract-detail-dialog .el-dialog__body {
  padding: 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
  max-height: 70vh;
  overflow-y: auto;
  position: relative;
  flex: 1;
  min-height: 0;
}

/deep/ .contract-detail-dialog .el-dialog__body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>') repeat;
  pointer-events: none;
}

/* 美化内容区域样式 */
.contract-detail-container {
  padding: 35px;
  position: relative;
  z-index: 1;
}

.detail-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.detail-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 30px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 1px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(20px);
}

.detail-section:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 5px 15px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.detail-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 0 3px 3px 0;
}

.detail-section::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.detail-section:hover::after {
  opacity: 1;
}

.section-title {
  margin: 0 0 25px 0;
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid #f1f5f9;
  position: relative;
  letter-spacing: 0.3px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 2px;
  animation: titleUnderline 0.6s ease-out;
}

@keyframes titleUnderline {
  0% { width: 0; }
  100% { width: 60px; }
}

.detail-section:nth-child(1) .section-title::before {
  content: '📄';
  margin-right: 12px;
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.detail-section:nth-child(2) .section-title::before {
  content: '💰';
  margin-right: 12px;
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.detail-section:nth-child(3) .section-title::before {
  content: '⏰';
  margin-right: 12px;
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.detail-section:nth-child(4) .section-title::before {
  content: '👥';
  margin-right: 12px;
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.detail-section:nth-child(5) .section-title::before {
  content: '📝';
  margin-right: 12px;
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-item {
  flex: 1;
  min-width: 250px;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.detail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.detail-item:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
  border-color: #29b6f6;
  transform: translateX(6px);
  box-shadow: 0 8px 25px rgba(41, 182, 246, 0.15);
}

.detail-item:hover::before {
  transform: scaleY(1);
}

.detail-item.full-width {
  flex: 100%;
  align-items: flex-start;
  min-height: 70px;
}

.detail-item label {
  font-weight: 700;
  color: #334155;
  margin-right: 15px;
  min-width: 100px;
  white-space: nowrap;
  font-size: 14px;
  position: relative;
}

.detail-item span {
  color: #1e293b;
  word-break: break-all;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.detail-item .amount {
  color: #dc2626;
  font-weight: 800;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/deep/ .contract-detail-dialog .el-dialog__footer {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  /* padding: 25px 35px; */
  border-radius: 0;
  text-align: center;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
}

/deep/ .contract-detail-dialog .el-dialog__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #667eea 50%, transparent 100%);
}

/deep/ .contract-detail-dialog .el-dialog__footer .el-button {
  padding: 14px 35px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 30px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

/deep/ .contract-detail-dialog .el-dialog__footer .el-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

/deep/ .contract-detail-dialog .el-dialog__footer .el-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

/deep/ .contract-detail-dialog .el-dialog__footer .el-button:hover::before {
  left: 100%;
}

/* 查看详情按钮样式 */
.view-detail-btn {
  margin-left: 15px;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.view-detail-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 捆绑合同详情弹窗样式 */
/deep/ .bundled-contracts-detail-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

/deep/ .bundled-contracts-detail-dialog .el-dialog {
  border-radius: 16px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 25px 30px;
  border-radius: 0;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__title {
  color: white;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__title::before {
  content: '📋';
  margin-right: 10px;
  font-size: 22px;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__headerbtn .el-dialog__close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__body {
  padding: 0;
  background: #f8fafc;
  flex: 1;
  overflow-y: auto;
  max-height: 70vh;
}

.bundled-contracts-detail-container {
  padding: 25px;
}

.no-data {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  font-size: 16px;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 15px;
  display: block;
}

.contracts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 25px;
}

.contract-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.contract-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delete-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  transition: all 0.3s ease;
  width: 28px;
  height: 28px;
  padding: 0;
}

.delete-btn:hover {
  background: #f56565 !important;
  border-color: #f56565 !important;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
}

.delete-btn:active {
  transform: scale(0.95);
}

.contract-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.contract-title i {
  margin-right: 8px;
  font-size: 20px;
}

.card-content {
  padding: 25px;
}

.card-content .detail-section {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid #667eea;
}

.card-content .detail-section:last-child {
  margin-bottom: 0;
}

.card-content .section-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.card-content .detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.card-content .detail-row:last-child {
  margin-bottom: 0;
}

.card-content .detail-item {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.card-content .detail-item.full-width {
  flex: 100%;
  align-items: flex-start;
}

.card-content .detail-item label {
  font-weight: 600;
  color: #475569;
  margin-right: 10px;
  min-width: 80px;
  white-space: nowrap;
  font-size: 13px;
}

.card-content .detail-item span {
  color: #1e293b;
  word-break: break-all;
  font-size: 13px;
  line-height: 1.5;
}

.card-content .detail-item .amount {
  color: #dc2626;
  font-weight: 700;
  font-size: 14px;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__footer {
  background: #f8fafc;
  padding: 20px 30px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__footer .el-button {
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 25px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  color: white;
}

/deep/ .bundled-contracts-detail-dialog .el-dialog__footer .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contract-detail-container {
    padding: 20px;
  }

  .detail-row {
    flex-direction: column;
    gap: 15px;
  }

  .detail-item {
    min-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }

  .detail-item label {
    margin-bottom: 8px;
    min-width: auto;
  }

  .section-title {
    font-size: 18px;
  }

  /deep/ .contract-detail-dialog .el-dialog__title {
    font-size: 20px;
  }

  .contracts-grid {
    grid-template-columns: 1fr;
  }

  .bundled-contracts-detail-container {
    padding: 15px;
  }

  .card-content .detail-item {
    min-width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .card-content .detail-item label {
    margin-bottom: 5px;
    min-width: auto;
  }

  .info-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .view-detail-btn {
    margin-left: 0;
    align-self: flex-end;
  }
}
</style>
